import React, { useMemo, useState, useEffect } from "react";
import EchartsForReact from "echarts-for-react";
export default function Chart2() {
  const styleObj = {
    width: "500px",
    height: "300px",
    backgroundColor: "#f5f5f5",
  };
  const [list, setList] = useState([]);
  //使用useMemo完成echart图表选项的编写
  const options = useMemo(() => {
    return {
      title: {
        text: "蜗牛学员1-6月份招生情况",
      },
      xAxis: {
        data: ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份"],
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          data: list,
        },
      ],
    };
  }, [list]);
  useEffect(() => {
    setList([50, 35, 67, 22, 12, 55]);
  }, []);
  return (
    <div>
      <EchartsForReact style={styleObj} option={options}></EchartsForReact>
    </div>
  );
}
